<template>
  <div>
    <div>
      <h2>Borrowed Books</h2>
      <el-table :data="borrowedlist" style="width: 100%">
        <el-table-column label="Borrow ID" prop="borrowid" width="100"></el-table-column>
        <el-table-column label="Title" prop="bookname"></el-table-column>
        <el-table-column label="Author" prop="author"></el-table-column>
        <el-table-column label="ISBN" prop="isbn"></el-table-column>
        <el-table-column label="Status" prop="status"></el-table-column>
        <el-table-column label="Borrowing Date" prop="borrowtime"></el-table-column>
        <el-table-column label="Deadline" prop="deadline"></el-table-column>
        <el-table-column label="Operation" width="100">
          <template slot-scope="scope">
            <el-button @click="openReturnConfirmation(scope.row)" type="primary" size="mini">Return</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 引入 ReturnConfirmation 组件 -->
    <ReturnConfirmation v-if="showReturnConfirmation" @close="closeReturnConfirmation" :book="selectedBook" />
  </div>
</template>

<script>
import ReturnConfirmation from "./ReturnConfirmation.vue"; // 导入 ReturnConfirmation 组件

export default {
  name: "UserBookRecord",
  components: {
    ReturnConfirmation // 注册 ReturnConfirmation 组件
  },
  data() {
    return {
      borrowedlist: [], // 存储书籍数据
      showReturnConfirmation: false, // 控制是否显示 ReturnConfirmation 组件
      selectedBook: null, // 存储当前选择的书籍信息

      userId: null //此处用于测试先设为1，后续需要从登录功能获取（可能吧
    };
  },
  mounted(){
    this.userId = this.$globalVariable.userid; // 获取用户 ID 并存储在 userId 数据属性中
    console.log('用户 ID:', this.userId);
    this.fetchRecords();

  },
  methods: {
    fetchRecords() {
      this.$request.get(`/book/borrow?userid=${this.userId}`)
      .then(response => {
        // 如果响应状态码不是 200，则抛出错误
        if (response.status !== 200) {
          throw new Error('Network response was not ok');
        }
        // 将返回的书籍列表存储到 books 数组中
        this.borrowedlist = response.data.data;
      })
      .catch(error => {
        // 请求失败，输出错误信息
        console.error('获取书籍列表失败:', error);
      });
    },
    updateRecords(){
      this.clearRecords();
      this.fetchRecords();
    },
    clearRecords(){
      this.borrowedlist=[];
    },
    openReturnConfirmation(book) {
      this.selectedBook = book;
      this.showReturnConfirmation = true;
    },
    closeReturnConfirmation() {
      this.showReturnConfirmation = false;
      this.selectedBook = null;
      this.updateRecords();
    }
  }
};
</script>

<style scoped>
/* 表格样式 */
.borrowed-book-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.borrowed-book-table th{
  color: rgb(255, 255, 255);
  background-color: #3d9afd;
  font-weight: bold;
  padding: 10px; /* 添加表头单元格内边距 */
}

.borrowed-book-table td {
  padding: 10px;
  border: 1px solid #ffffff;
  text-align: center;
}

.borrowed-book-table tbody tr:nth-child(even) {
  background-color: #f3f3f3;
}
</style>
